<template>
	<view class="class_detail">
			<!-- 导航栏 -->
			<navBar :backFont="true" :title="className" >
			</navBar>	
			<view class="uni-container">
						<uni-table ref="table" :loading="loading"   emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="100" align="center">姓名</uni-th>
								<uni-th width="100" align="center">性别</uni-th>
								<uni-th align="center">学号</uni-th>
								<uni-th width="150" align="center">系统账号</uni-th>
								<uni-th width="100" align="center">录入照片</uni-th>
								<uni-th width="150" align="center">录入状态</uni-th>
								<uni-th width="204" align="center">操作</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in reactive_obj.student_list" :key="index">
								<uni-td class="uniTd" align="center">{{ item.Name }}</uni-td>
								<uni-td align="center">
									<view class="name">{{ item.Sex }}</view>
								</uni-td>
								<uni-td align="center">{{ item.StudentID }}</uni-td>
								<uni-td align="center">{{ item.SysAccount }}</uni-td>
								<uni-td align="center">
									<view class="faceImgUrl_con">
										<image class="faceImgUrl" :lazy-load="true" src="../../static/icons/nothing.png" mode="heightFix"></image>
									</view>
								</uni-td>
								<uni-td align="center">
									<text v-if="item.facePic" class="success_font">已录入</text>
									<text v-else class="fail_font">待录入</text>
								</uni-td>
								<uni-td align="center">
									<view class="uni-group">
										<button class="uni-button" size="mini" type="primary" :disabled="item.facePic" @click="goAddFace(item.id)">录入照片</button>
										<button class="uni-button" size="mini" type="primary">更多操作</button>
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
			</view>
		</view>
</template>


<script lang="ts" setup>
	import { ref,reactive,onMounted } from "vue";
	import requester from "../../server/requester";
	import {
		    onLoad,
			onShow
		  } from "@dcloudio/uni-app";
		  
	// onLoad 接受 A 页面传递的参数
	let className = ref('')
	let classId:any
	  onLoad((option) => {
	   console.log(option);
	   className.value = option.className
		classId =  option.classId
	  });
	  onShow(()=>{
		  getStuduentList(classId)
	  })
	let userToken:any
	onMounted(()=>{
		try {
			userToken = uni.getStorageSync('user_token');
			console.log("userToken====>>>",userToken);
			if (userToken == "") {
				uni.navigateTo({
					url:'/pages/login/login',
				})
				return
			}
			getStuduentList(classId)
		} catch (e) {
			// error
			uni.navigateTo({
				url:'/pages/login/login',
			})
		}
	})
	let reactive_obj = reactive({
		student_list:[
		]as any[],//班级列表
	})
	
	
	const getStuduentList = async(ClassID:any)=>{
		let data = {
				 ClassID: Number(ClassID) ,
				}
		let result:any = await requester({
			url:'/AiSports/Student/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		
		console.log( '获取到的请求结果====>>>', result);
		reactive_obj.student_list =  result.data.studentList
		
	}
	
	let loading = ref(false)

	const goAddFace = (studentId:any) => {
		uni.navigateTo({
			url:"/pages/addStudentsPicture/addStudentsPicture?studentId=" + studentId
		})
	}
</script>

<style >
	.class_detail{
		width: 100vw;
	}
.uni-container{
	width: 96vw;
	margin: 2vh auto;
	padding-top: 12vh;
}
.faceImgUrl_con{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.faceImgUrl{
	will-change: transform;
	margin: auto 0; 
	height: 4vh;
	border-radius: 50%;
	background-color: #aaa;
}
.success_font{
	color: green;
}
.fail_font{
	color: red;
}
.uni-group{
	display: flex;
}
.uni-button{
	width: 10vw;
	font-size: 0.8rem;
	transform: scale(0.8);
}
</style>
